<template>
	<view class="content">
		<WaterfallsFlow :wfList="goodsList" @itemTap="choose"></WaterfallsFlow>
		<u-loadmore :status="status" />
	</view>
</template>

<script>
	import WaterfallsFlow from '@/components/WaterfallsFlow/WaterfallsFlow.vue'
	import data from '@/static/data.js'
	import {getStorageSync} from '@/static/utils.js'
	export default {
		data() {
			return {
				allList: [],
				data: [],
				status: 'loadmore',
				list: 10,
				title: 'Hello',
				goodsList: [],
			}
		},
		components: {
			WaterfallsFlow
		},
		methods: {
			onReachBottom() {
				if (this.list >= this.allList.length) {
					this.status = 'nomore';
					return;
				}
				this.status = 'loading';
				setTimeout(() => {
					this.list += 10;
					if (this.list >= this.allList.length) this.status = 'nomore';
					else this.status = 'loading';
				}, 2000)
			},
			// 选中
			choose(item) {
				let index = this.allList.findIndex((val) => {
					return val == item
				})
				uni.previewImage({ // 预览图片  图片路径必须是一个数组 => ["http://192.168.100.251:8970/6_1597822634094.png"]
					current: index,
					urls: this.allList,
					longPressActions: { //长按保存图片到相册
						itemList: ['保存图片'],
						success: (data) => {
							console.log(data);
							uni.saveImageToPhotosAlbum({ //保存图片到相册
								filePath: payUrl,
								success: function() {
									uni.showToast({
										icon: 'success',
										title: '保存成功'
									})
								},
								fail: (err) => {
									uni.showToast({
										icon: 'none',
										title: '保存失败，请重新尝试'
									})
								}
							});
						},
						fail: (err) => {
							console.log(err.errMsg);
						}
					}
				});
			},
			getList() {
				this.goodsList = this.allList.slice(0, this.list)
			},
			shuffle(arr) {
				var l = arr.length
				var index, temp
				while (l > 0) {
					index = Math.floor(Math.random() * l)
					temp = arr[l - 1]
					arr[l - 1] = arr[index]
					arr[index] = temp
					l--
				}
				return arr
			},
			getPicNum() {
				uni.request({
					url: 'https://fc-mp-fff067d4-0ad0-46f1-8940-3076faaf2173.next.bspapp.com/getPicNum',
					data: {},
					success: (res) => {
						console.log(res);
						if (res.data.code == 200) {
							this.getImgs(res.data.data.photo)
						}
					}
				})
			},
			getImgs(num) {
				this.allList = []
				for (let i = 1; i <= num; i++) {
					this.allList.push('https://mp-fff067d4-0ad0-46f1-8940-3076faaf2173.cdn.bspapp.com/image/wedding/wedding' + i +
						'.jpg')
				}
				this.data = this.shuffle(this.allList)
				this.getList()
			}
		},
		watch: {
			list: function() {
				this.getList()
			}
		},
		created() {
			this.getPicNum()
		}
	}
</script>

<style lang="scss">
	.content {
		width: 100%;
		padding-bottom: 150rpx;

		.imgList {
			width: 48%;
			display: inline-block;
			margin: 0 1%;

			image {
				width: 100%;
			}
		}
	}
</style>